<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" size="mini" class="form-filter" label-width="70px">
            <el-form-item label="接口">
                <el-input v-model="filter.route" placeholder="请输入接口地址" style="width:200px;"/>
            </el-form-item>
            <el-form-item label="IP">
                <el-input v-model="filter.ip" placeholder="请输入IP" style="width:200px;"/>
            </el-form-item>
            <el-form-item label="操作人">
                <el-select v-model="filter.adminId" filterable clearable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in adminList"
                        :key="item.id"
                        :label="item.username"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="业务类型">
                <el-select v-model="filter.bizType" filterable clearable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in Dict.enums.bizType"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="业务标识">
                <el-input v-model="filter.bizValue" placeholder="请输入" style="width:200px;"/>
            </el-form-item>
            <el-form-item label="操作时间">
                <el-date-picker
                    v-model="filter.timeRange"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :unlink-panels="true"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + (page.current - 1) * page.size + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="route" label="接口"/>
                <el-table-column prop="method" label="请求方式" width="80px"/>
                <el-table-column prop="ip" label="IP" width="100px"/>
                <el-table-column prop="speedTime" label="时间" width="80px"/>
                <el-table-column prop="bizTypeName" label="业务类型" width="80px"/>
                <el-table-column prop="bizValue" label="业务标识" width="160px"/>
                <el-table-column prop="logTitle" label="操作类型" width="120px"/>
                <el-table-column prop="logRemark" label="操作备注" width="180px"/>
                <el-table-column prop="sourceName" label="来源" width="100px"/>
                <el-table-column prop="result" label="结果" width="70px">
                    <template #default="scope">
                        <el-tag v-if="scope.row.result" type="success">成功</el-tag>
                        <el-tag v-else type="danger">失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="updateName" label="操作人" width="80px"/>
                <el-table-column prop="updateTime" label="操作时间" width="160px"/>

                <el-table-column fixed="right" label="详情" width="100px">
                    <template #default="scope">
                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showDetail(scope.row.id)">查看
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <el-dialog
                :visible.sync="dialogVisible"
                title="日志详情"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                width="800px"
            >
                <el-form :model="detailData" label-width="120px">
                    <el-form-item label="请求URL">
                        <el-input v-model="detailData.host + detailData.route" readonly/>
                    </el-form-item>
                    <el-form-item label="请求头信息">
                        <el-input v-model="detailData.header" type="textarea" rows="3" readonly/>
                    </el-form-item>
                    <el-form-item label="GET参数">
                        <el-input v-model="detailData.get" type="textarea" rows="3" readonly/>
                    </el-form-item>
                    <el-form-item label="POST参数">
                        <el-input v-model="detailData.post" type="textarea" rows="3" readonly/>
                    </el-form-item>
                    <el-form-item label="返回结果">
                        <el-input v-model="detailData.response" type="textarea" rows="3" readonly/>
                    </el-form-item>

                </el-form>
            </el-dialog>
        </div>
    </section>
</template>
<script>
import {LogApi} from '@/api/system/log'
import {AdminApi} from '@/api/system/admin'

export default {
    name: 'SystemLogList',
    components: {},
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                route: '',
                ip: '',
                adminId: '',
                timeRange: [],
                bizType: '',
                bizValue: ''
            },
            loading: false,
            dialogVisible: false,
            detailData: {
                id: 0,
                url: '',
                route: '',
                header: '',
                get: '',
                post: '',
                response: ''
            },
            adminList: [],
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.getPage()
        this.getUserList()
    },
    methods: {
        // 获取列表
        getPage() {
            const that = this
            const params = {
                pageIndex: that.page.current,
                pageSize: that.page.size,
                route: that.filter.route,
                ip: that.filter.ip,
                adminId: that.filter.adminId,
                timeRange: that.filter.timeRange,
                bizType: that.filter.bizType,
                bizValue: that.filter.bizValue,
            }

            that.loading = true
            LogApi.getPage(params)
                .then((response) => {
                    that.page = response
                    that.loading = false
                }).catch((err) => {
                that.loading = false
            })
        },

        // 获取所有用户列表
        getUserList() {
            AdminApi.getList({}).then((response) => {
                this.adminList = response
            }).catch((err) => {
            })
        },

        // 获取用户列表
        showDetail(logId) {
            this.dialogVisible = true
            LogApi.getInfoById(logId)
                .then((response) => {
                    this.detailData = response
                }).catch((err) => {
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        }
    }
}

</script>

<style lang="scss" scoped></style>
